<template>
	<view class='homepage' >
      <view class='imgBox'>
		  <view class='iconBox' @click='$my.go()'>
			 <u-icon name='arrow-left' size='60rpx ' color="#ED531F"></u-icon>
		  </view> 
		  <text class='text'>奈喜狂欢 优惠不停</text>
		  <image :src="info.image?info.image:'../../static/images/copbgc.png'" mode="widthFix" class="bgc" style="width: 100%;"></image>
	  </view>
		<view  class='relative lisInfoBox' >
			<view class='lis' v-for="(item,index) in list" :key="index">
				<view class='box'>
					<view class='liBox'>
						<view class='whiBox flexJBC'>
							 <view class='left'>
								<view class='left_t'>
									<view class='flex'>
										<view style="color: #EE8950;margin-right: 20rpx;" v-if="item.type==1">
											 <text class='fw7 fontS20'>￥</text>
											 <text class="fw9 fontS40">{{item.coupon_price}}</text>
										</view>
										<view style="color: #EE8950;margin-right: 20rpx;" v-if="item.type==2">
											 <text class="fw9 fontS40">{{item.discount}}</text>
											 <text class='fw7 fontS20'>折</text>
										</view>
										<view class="">
											<view class="co3 fw9 fontS24" style="margin-bottom: 10rpx;" >
												{{item.title}}
											</view>
											<view class="fontS16 co6" style="line-height: 35rpx;">
												<view class="" > 
													{{item.full_text}}
												</view>
												<view class="" v-if="item.time_type==0" >
													<view class="" >
														有效期：										
													</view> 
													<text> 
														{{item.start_time}}-{{item.end_time}}
													</text>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class='left_b ' @click="item.showInfo=!item.showInfo">
									<view class="flexJBC">
										<view class="co6 fontS20">
											使用说明
										</view>
										<u-icon :name="item.showInfo?'arrow-down':'arrow-right'" size='16rpx' color="#666"></u-icon>
									</view>
									<view class="fontS16 co6" style="margin-top: 8rpx;"  v-if="item.showInfo">
										{{item.text}}
									</view>
								</view>
							 </view>
							 <view class='right'>
								 <view class='cilr'></view>
								 <view class='btn' @click="getcouPon(item.coupon_id)">立即领取</view>
							 </view>
						</view>
					</view>
				</view>
			</view>
			<view class="rulesBox">
				<view class='rules'>
					<view class="center cof fontS28 fw9">
						优惠券使用规则
					</view>
					<view class="cof fontS24" style="line-height: 40rpx;margin-top:20rpx;">
						{{info.text}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[],
				page:1,
				info:'',
			}
		},
		onReachBottom() {
			this.page++;
			this.getList()
		},
		methods:{
			getList(val){
				if(val){
					this.page=1;
				}
				this.$my.post('/index/coupon/get_coupon',{page:this.page,limit:20,type:1}).then(res=>{
					if(res.code==200){
						if(val){
							this.list=[];
						}
						this.list=this.list.concat(res.data)
						this.list.forEach(item=>{
							this.$set(item,'showInfo' ,false) //是否显示使用说明
						})
					}
				})
			},
			getcouPon(id){
				this.$my.post('/index/coupon/userReceiveCoupon',{id:id}).then(res=>{
					if(res.code==200){
						this.$my.toast('领取成功')
						this.getList(true)
					}else{
						this.$my.toast(res.message)
					}
				})
			}
		},
		onLoad() {
			this.$my.post('/index/coupon/findCouponRule').then(res=>{
				if(res.code==200){
					this.info=res.data
				}
			})
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.rulesBox{
		background-color: #fff;
		padding-bottom: 6rpx;
		border-radius: 24rpx;
		.rules{
				background: linear-gradient(180deg, #F4C28F 0%, #EDAC89 100%);
				border-radius: 24rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
	}
	
	.lisInfoBox{ 
		left: 0;
		padding: 0 32rpx;
		width: 100%;
		box-sizing: border-box;
		padding-top: 700rpx;
		.lis{
			width: 100%;
			padding-bottom: 6rpx;
			background: #FFFFFF;
			border-radius:24rpx;
			margin-bottom: 16rpx;
			.box{
				background: linear-gradient(180deg, #F4C28F 0%, #EDAC89 100%);
				border-radius:24rpx;
				padding: 20rpx;
				box-sizing: border-box;
				.liBox{
					padding-bottom: 6rpx;
					background: #FAE5B4;
					box-shadow: 0px 8rpx 8rpx rgba(219, 140, 104, 0.5);
					border-radius: 24rpx;
						
					.whiBox{
						background: #FFFFFF;
						border-radius: 24rpx;
						.left{
							width: 70%;
							border-right: 1px dashed #E0E0E0;
							display: flex;
							justify-content: space-between;
							flex-direction: column;
							.left_t{
								flex: 1;
								padding:20rpx;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								justify-content: center;
								
							}
							.left_b{
								// height:46rpx;
								// line-height: 46rpx;
								padding:8rpx 20rpx ; 
								border-top: 2rpx solid #F5F5F5;
								// padding:0 20rpx;
								box-sizing: border-box;
							}
						}
						.right{
							padding: 20rpx;
							box-sizing: border-box;
							position: relative;
							.cilr{
								width: 10rpx;
								height:10rpx;
								background: #F0A54F;
								float: right;
								border-radius: 50%;
								position: absolute;
								right: 20rpx;
								top:-30rpx ; 
							}
							.btn{
								width: 158rpx;
								height: 54rpx;
								background: linear-gradient(180deg, #F3C18E 0%, #EDAC89 100%);
								border-radius: 40rpx;
								line-height: 54rpx;
								text-align: center;
								font-weight: 900;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
	.imgBox{
		.iconBox{
			position: absolute;
			z-index: 99;
			top: 140rpx;
			left:10rpx; 
		}
		text{
			font-weight: 900;
			font-size: 72rpx;
			z-index: 9;
			position: absolute;
			color: #ED531F;
			width:100%;
			text-align: center;
			white-space: nowrap;
			margin-top: 120rpx;
		}
			position: relative;
			left: 0%;
			top: 0;
		.bgc{
			position: absolute;
			left: 0%;
			top: 0;
			
		}
	}
	.homepage{
		padding-bottom: 20rpx;
		background-color: #FEC587;
		min-height:98.5vh; 
	}
	
</style>